<template>
  <div>
    <main-layout>
      <div class="detailLandBox">
        <!-- <div class="backBtn" @click="close">
          <img src="/src/assets/back.png" alt="">
          返回
        </div> -->
        <div style="width: 100%;height: 100%;">
          <iframe v-if="gisUrl" id="iframeContainer" :src="gisUrl" frameborder="0" scrolling="no" height="100%"
            width="100%" />
        </div>

      </div>
    </main-layout>
  </div>
</template>
  
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import mainLayout from '@/components/custom/mainLayout.vue'

import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/pinia/modules/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

let plantingPlanId = ''

onMounted(async () => {
  initMap()
})

const close = () => {
  router.push(`/manage/plan/detail?plantHeaderId=${route.query.plantingPlanId}`)
}
// #region 地图相关
const gisUrl = ref('')
let iframeDom
const initMap = () => {
  const baseUrl = import.meta.env.VITE_GIS_PAGE
  const userId = userStore.userInfo.userId
  const companyId = userStore.userInfo.companyId
  const farmId = userStore.userInfo.farmId
  const selectedLand = route.query.selectedLand
  gisUrl.value = `${baseUrl}/land/projectDetail?userId=${userId}&companyId=${companyId}&farmId=${farmId}&selectedLand=${selectedLand}&toolPanelVisible=0`
  nextTick(() => {
    iframeDom = document.querySelector('#iframeContainer')
    window.addEventListener('message', getMes)
  })
}

const getMes = (event) => {
  const { data: { type } } = event
  if (type == 'close') {
    close()
  }
}
onBeforeUnmount(() => {
  destory()
})
const destory = () => {
  window.removeEventListener('message', getMes)
}
// #endregion
</script>
  
<style lang="scss" scoped>
.detailLandBox {
  position: relative;
  z-index: 100;
  width: 100%;
  height: calc(100vh - 103px);
  margin: 0;

  .backBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 100;
    height: 100%;
    color: #333;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    padding: 0;
    box-sizing: border-box;
    height: 38px;
    width: 100px;
    border-radius: 2px;
    border: 1px solid #DDDDDD;
    background: #fff;

    &:hover {
      cursor: pointer;
      background-color: #DDDDDD;
      color: #25B983;
    }

    img {
      display: block;
      height: 14px;
      margin: 0 10px 0 0;
    }

    &+.myBtn {
      margin-left: 10px;
    }
  }
}
</style>
 
  